<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>查看用户</title>
    <!--新Bootstrap4核心CSS文件-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-
bootstrap/4.3.1/css/bootstrap.min.css">

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <!--bootstrap.bundle.min，js 用于弹窗、提示、下拉菜单，包含了popper.min.js-->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js">
    </script>

    <!--最新的Bootstrap4核心 JavaScript文件-->
    <script src="https://cdn.staticfile.org/twitter-
bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script>
        function isNull(str) {
            if (str == "")
                return true;
            var regu = "^[]+$";
            var re = new RegExp(regu);
            return re.test(str);
        }
            $(function () {
                $("#btn4showhide").click(function () {
                    if ($("#div4addUser").is(":hidden"))
                        $("#div4addUser").show();
                    else
                        $("#div4addUser").hide();
                });

                $("#add").click(function () {
                    var nameVal = $("#name").val();
                    var pwdVal = $("#pwd").val();
                    var roleVal = $("#role option:selected").text();
                    if (isNull(nameVal) || isNull(pwdVal) || isNull(roleVal)) {
                        confirm("请完善信息");
                        return;
                    }
                        var param = {
                            "name":nameVal,
                            "password":pwdVal,
                            "role":roleVal
                        };
                        $.ajax({
                            url:"/addUser", //请求url
                            data:param,//请求参数
                            async:true, //是否异步
                            success:function f(result) {
                                window.confirm(result.msg) //新增用户成功提示框
                                location.href ="users";//重新加载界面, 同步数据库信息
                            }
                        });
                });
            });
    </script>
    </head>
    <body >
    <div id = "selectResult" >
    <table class= "table table-dark table-hover" >
    <thead >
    <tr >
    <th >用户ID</th>
    <th >用户名称</th>
    <th >用户密码</th>
    <th >用户权限</th>
    <th >操作</th>
    </tr>
    </thead>

    <tbody>
    <tr th:each="user:${userList}" >
    <td th:text = "${user.id}" > < /td>
    <td th:text = "${user.name}" > < /td>
    <td th:text = "${user.password}" > < /td>
    <td th:text = "${user.role}" > < /td>
    <td>
        <a th:href = "@{/user+{id}(id=${user.id})}" >修改</a>
        <a th:href = "@{/deleteUser+{id}(id=${user.id})}"id="delete">删除</a>
    </td>
    </tbody>
    </table>

    </div>
    <div id="addUser">
        <label style="display:block;margin: 0 auto">添加用户</label>
        <form name="addUser">
            <div class="form-group">
                <label for="name">name:</label>
                <input type="text" class="form-control" name="name" id="name">
            </div>
            <div class="from-group">
                <label for="pwd">Password:</label>
                <input type="password" class="from-control" name="pwd" id="pwd">
            </div>
            <div class="form-check">
                <label for="role">role:</label>
                <select class="form-control" name="role" id="role">
                    <option>admin</option>
                    <option>user</option>
                </select>
            </div>
        </form>
        <button id="add">AddUser</button>
    </div>
    </body>
    </html>